
<template>
  <div class="home">
    <!-- 头部导航 -->
    <div class="topnav">
      <div class="topleft" @click="changelang">
        <svg style="font-size: 0.26rem;" t="1650347373479" class="icon" viewBox="0 0 1026 1024" version="1.1"
          xmlns="http://www.w3.org/2000/svg" p-id="2788" width="16" height="16">
          <path
            d="M995.991511 893.736383a30.181561 30.181561 0 0 1-30.181561-30.181561V127.849092A67.48597 67.48597 0 0 0 898.203254 60.363122H162.980429a30.181561 30.181561 0 0 1 0-60.363122h735.222825A127.909455 127.909455 0 0 1 1026.173072 127.849092v735.70573a30.181561 30.181561 0 0 1-30.181561 30.181561z"
            p-id="2789"></path>
          <path
            d="M784.720585 1024H108.653619a108.653619 108.653619 0 0 1-108.653619-108.653619V238.736147a108.653619 108.653619 0 0 1 108.653619-108.653619h676.066966a108.653619 108.653619 0 0 1 108.653619 108.653619v676.791323a108.653619 108.653619 0 0 1-108.653619 108.47253zM108.653619 190.626739a48.290498 48.290498 0 0 0-48.290497 48.290498v676.610233a48.290498 48.290498 0 0 0 48.290497 48.290497h676.066966a48.290498 48.290498 0 0 0 48.290497-48.290497V238.736147a48.290498 48.290498 0 0 0-48.290497-48.290497z"
            p-id="2790"></path>
          <path
            d="M663.028531 728.824334a20.644188 20.644188 0 0 1-7.424664 16.177317 26.378684 26.378684 0 0 1-18.108937 6.458854 22.937986 22.937986 0 0 1-22.63617-15.513323l-45.63452-104.790379H325.41759l-46.539967 104.790379a22.937986 22.937986 0 0 1-22.636171 15.513323 26.499411 26.499411 0 0 1-18.108936-6.821033 21.06673 21.06673 0 0 1-7.786843-16.479132 22.515444 22.515444 0 0 1 2.595614-10.322094l184.952606-411.374676a27.827399 27.827399 0 0 1 11.650082-13.581703 32.958265 32.958265 0 0 1 17.143127-4.527234 32.535723 32.535723 0 0 1 17.444942 4.82905 30.181561 30.181561 0 0 1 11.650083 13.279887l184.952605 411.374676a23.722707 23.722707 0 0 1 2.293799 10.986088zM549.847677 587.152087l-102.617307-232.156567-102.375855 232.156567z"
            p-id="2791"></path>
          <path
            d="M637.796746 757.496817a28.913935 28.913935 0 0 1-28.129215-19.255836l-44.306531-101.047866h-236.019807l-44.970526 101.168592a28.793209 28.793209 0 0 1-28.129215 19.13511 32.414996 32.414996 0 0 1-22.092902-8.330111 26.921952 26.921952 0 0 1-9.839189-21.006366 29.457203 29.457203 0 0 1 3.199245-13.038435l184.892243-411.133223a34.044801 34.044801 0 0 1 14.12497-16.298043 39.718934 39.718934 0 0 1 40.503655 0.422542 36.217873 36.217873 0 0 1 13.943881 15.815138l184.952606 411.374676a30.181561 30.181561 0 0 1 3.138882 13.521339 26.318321 26.318321 0 0 1-9.537373 20.704551 32.29427 32.29427 0 0 1-21.730724 7.967932z m-316.302759-132.376327H573.449658l47.505777 108.65362a16.962037 16.962037 0 0 0 17.082764 12.072624 20.10092 20.10092 0 0 0 13.823154-5.010139 14.426786 14.426786 0 0 0 5.372318-11.589719 18.95402 18.95402 0 0 0-1.93162-8.330111l-185.314784-411.978307a24.929969 24.929969 0 0 0-9.356284-10.62391 26.076869 26.076869 0 0 0-13.943881-3.923602 26.559774 26.559774 0 0 0-13.762792 3.68215 22.032539 22.032539 0 0 0-9.175194 10.804999l-185.314784 411.435039a17.505305 17.505305 0 0 0-2.052347 7.847206 15.030417 15.030417 0 0 0 5.674134 12.072624 20.704551 20.704551 0 0 0 14.185333 5.311955 16.901674 16.901674 0 0 0 17.022401-12.072625z m237.649611-31.932091h-223.343551l111.188871-253.162933z m-205.234614-12.072624h186.642773l-93.502476-211.270927zM651.921717 891.020042H253.525112a30.181561 30.181561 0 0 1 0-60.363121h398.396605a30.181561 30.181561 0 0 1 0 60.363121z"
            p-id="2792"></path>
        </svg>
      </div>
      <div class="topcenter">
        <span class="navbtn">
          {{ $t('discover.profile') }}
        </span>
        <span class="navbtn  active"> {{ $t('discover.discover') }} </span>
        <span class="navbtn"> {{ $t('discover.valige') }} </span>
        <span class="navbtn"> {{ $t('discover.video') }} </span>
      </div>
      <div class="topright" @click="router.push('/search')">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-sousuo"></use>
        </svg>
      </div>
    </div>
    <!-- 头部导航 -->
  </div>

</template>
<script setup>
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
let { locale } = useI18n()
let router = useRouter()
// 切换语言
let changelang = () => {
  if (localStorage.getItem('lang') == 'en') {
    locale.value = 'rus'
    localStorage.setItem('lang', 'rus')
  }
  else {
    locale.value = 'en'
    localStorage.setItem('lang', 'en')
  }
}
</script>

<style scoped lang="less">
.topnav {
  width: 7.5rem;
  height: 1rem;
  display: flex;
  padding: 0 0.2rem;
  justify-content: space-between;
  align-items: center;

  .topcenter {
    width: 5rem; //总共7.5rem
    display: flex;
    justify-content: space-around;

    .active {
      font-weight: 900;
    }
  }


}
</style>
